<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>kangai</title>

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->


    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="styles/main.css">


  </head>
  <body class="layui-layout-body">

    <div class="layui-layout layui-layout-admin layui-layout_ka">
      <div class="layui-header">
        <ul class="h-menus">
          <li>
            <img src="./images/user.png" class="icon">
            <span id="h-user"></span>
          </li>
          <li id="btn-exit" class="btn-exit">
            <img src="./images/exit.png" class="icon">
            退出
          </li>
        </ul>
      </div>
      <div class="layui-side">
        <div class="bar-container layui-bg-green">
          <img id="logo" src="images/logo.png" class="logo">
          <div class="menus" id="menus">
            <a class="menu " href="./index.html">
              <img src="images/menu-index.png" class="icon">
              <p>营养筛查</p>
            </a>
            <a class="menu" href="./nutritiveriskView.html">
              <img src="images/menu-nutritiveriskView.png" class="icon">
              <p>营养看板</p>
            </a>
            <a class="menu active" href="./censusView.html">
              <img src="images/menu-censusView.png" class="icon">
              <p>统计查询</p>
            </a>
          </div>
        </div>

      </div>
      <div class="layui-body">
        <div class="layui-container-full">

          <div class="layui-row page-header">
            <div class="layui-col-xs8">
              <div class="page-title h3">
                营养驾驶舱
              </div>
              <div class="layui-btn-group">
                <a href="./censusView.html" class="layui-btn-hollow active">营养风险统计</a>
                <a href="./censusView2.html" class="layui-btn-hollow ">复核工作量统计</a>
              </div>
            </div>
            <div class="layui-col-xs4">
              <div class="time-board">
                <div class="time-header">
                  <div class="time" id="time"></div>
                  <div>
                    <p class="year" id="year"></p>
                    <p class="week" id="week"></p>
                  </div>
                </div>
                <div class="time-footer">
                  <img src="images/logo2.png" >
                </div>
              </div>
            </div>
          </div>


          <div class="layui-row">
            <div class="layui-col-xs6 p-1">
              <div class="chart-board">
                <div class="board-header layui-form  d-flex">
                  <div class="layui-form-item flex m-0">
                    <label class="layui-form-label block text-left ">昨天入院患者营养风险统计</label>
                  </div>
                  <div class="layui-form-item form-item-flex m-0">
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="zryytj-start" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="zryytj-end" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <button class="layui-btn layui-btn-normal"  id="zryytj-btn">查询</button>
                    </div>
                  </div>
                </div>

                <div class="board-body">
                  <table class="layui-table block-center" style="width: 200px" >
                    <tbody>
                    <tr>
                      <td>时间段内住院人数</td>
                      <td id="inpeople"></td>
                    </tr>
                    <tr>
                      <td>营养风险人数</td>
                      <td id="riskpeople"></td>
                    </tr>
                    </tbody>
                  </table>
                  <div id="zryytj" class="block-center" style="height: 400px; width: 400px"></div>
                </div>
              </div>
            </div>
            <div class="layui-col-xs6 p-1">
              <div class="chart-board">
                <div class="board-header layui-form  d-flex">
                  <div class="layui-form-item flex m-0">
                    <label class="layui-form-label block text-left ">在院患者营养风险统计</label>
                  </div>
                  <div class="layui-form-item form-item-flex m-0">
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="allyytj-start" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="allyytj-end" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <button class="layui-btn layui-btn-normal" id="allyytj-btn">查询</button>
                    </div>
                  </div>
                </div>

                <div class="board-body">
                  <table class="layui-table block-center" style="width: 200px">
                    <tbody>
                    <tr>
                      <td>在院患者</td>
                      <td id="nowPatient"></td>
                    </tr>
                    <tr>
                      <td>营养不良人数</td>
                      <td id="riskPeople1">28</td>
                    </tr>
                    </tbody>
                  </table>
                  <div id="allyytj" class="block-center" style="height: 400px; width: 400px"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="layui-row">
            <div class="layui-col-xs12 p-1">
              <div class="chart-board">
                <div class="board-header layui-form  d-flex">
                  <div class="layui-form-item flex m-0">
                    <label class="layui-form-label block text-left ">昨天入院患者营养风险统计</label>
                  </div>
                  <div class="layui-form-item form-item-flex m-0">
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="zraxis-start" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="zraxis-end" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <button class="layui-btn layui-btn-normal" id="zraxis-btn">查询</button>
                    </div>
                  </div>
                </div>
                <div class="board-body layui-row">
                  <div class="layui-col-xs5">
                    <table class="layui-table" id="zrtable" style=" width: 100%">
                      <thead>
                        <tr>
                          <td></td>
                          <td>住院患者</td>
                          <td>营养不良</td>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                  </div>
                  <div class="layui-col-xs7">
                    <div id="zraxis" style="height: 400px; width: 100%">12312</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-row">
            <div class="layui-col-xs12 p-1">
              <div class="chart-board">
                <div class="board-header layui-form  d-flex">
                  <div class="layui-form-item flex m-0">
                    <label class="layui-form-label block text-left ">营养干预占比和营养治疗人次变化</label>
                  </div>
                  <div class="layui-form-item form-item-flex m-0">
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="yygyaxis-start" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <input type="text" class="layui-input" id="yygyaxis-end" placeholder="yyyy-MM-dd">
                    </div>
                    <div class="layui-input-inline d-flex">
                      <button class="layui-btn layui-btn-normal" id="yygyaxis-btn">查询</button>
                    </div>
                  </div>
                </div>
                <div class="board-body layui-row">
                  <div class="layui-col-xs3">
                    <table class="layui-table" id="yygytable" style=" width: 100%">
                      <tbody></tbody>
                    </table>
                  </div>
                  <div class="layui-col-xs9">
                    <div id="yygyaxis" style="height: 400px; width: 100%">12312</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="layui-footer text-center t-gray" id="copyright"></div>
    </div>


    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->


    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script src="scripts/main.js"></script>
    <script src="lib/echarts.js" charset="utf-8"></script>



    <script type="text/javascript">
      layui.use(['layer', 'form', 'table', 'element', 'laydate', 'httpService', 'httpRouter', 'DateFormat', 'common'], function(){
        var table = layui.table,
          form = layui.form,
          laydate = layui.laydate,
          element = layui.element,
          common = layui.common,
          $ = layui.jquery,
          http = layui.httpService,
          DateFormat = layui.DateFormat,
          httpRouter = layui.httpRouter;


        common.init();
        common.getMenus(2);

        var yesterday = DateFormat.addDay(new Date(), -1)

        //常规用法
        laydate.render({
          elem: '#zryytj-start'
          ,value: yesterday
          ,isInitValue: true
        });
        laydate.render({
          elem: '#zryytj-end'
          ,value: yesterday
          ,isInitValue: true
        });

        laydate.render({
          elem: '#allyytj-start'
          ,value: yesterday
          ,isInitValue: true
        });
        laydate.render({
          elem: '#allyytj-end'
          ,value: yesterday
          ,isInitValue: true
        });

        laydate.render({
          elem: '#zraxis-start'
          ,value: yesterday
          ,isInitValue: true
        });
        laydate.render({
          elem: '#zraxis-end'
          ,value: yesterday
          ,isInitValue: true
        });
        laydate.render({
          elem: '#yygyaxis-start'
          ,value: yesterday
          ,isInitValue: true
        });
        laydate.render({
          elem: '#yygyaxis-end'
          ,value: yesterday
          ,isInitValue: true
        });

        $("#zryytj-btn").on("click",function () {
          getYesterdayinrisk();
        });

        function getYesterdayinrisk() {
          var startdate = $("#zryytj-start").val();
          var findate = $("#zryytj-end").val();

          var param = "startdate="+startdate+"&findate="+findate;
          http.post(httpRouter.yesterdayinrisk,param,function (res) {
            yesterdayinrisk(res);
          });
        }
        function yesterdayinrisk(res) {
          $("#inpeople").text(res.nowPatient || 0);
          $("#riskpeople").text(res.riskPeople || 0);
          // 基于准备好的dom，初始化echarts实例
          var zryytj = echarts.init(document.getElementById('zryytj'));
          // 绘制图表
          zryytj.setOption({
            tooltip : {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)"
            },
            series : [
              {
                type: 'pie',
                radius : '50%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                  {value:res.nowPatient,name: '营养不良'+res.nowpercent},
                  {value:res.riskPeople, name: '在院患者'+res.riskpercent}
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ],
            color: ['#006A39','#EA0101']
          });
        }
        getYesterdayinrisk();


        $("#allyytj-btn").on("click",function () {
          getNowrisk();
        });
        function getNowrisk() {
          var startdate = $("#allyytj-start").val();
          var findate = $("#allyytj-end").val();
          var param = "startdate="+startdate+"&findate="+findate;
          http.post(httpRouter.nowrisk,param,function (res) {
            nowrisk(res);
          });
        }
        function nowrisk(res) {
          $("#nowPatient").text(res.nowPatient || 0);
          $("#riskPeople1").text(res.riskPeople || 0)

          // 基于准备好的dom，初始化echarts实例
          var allyytj = echarts.init(document.getElementById('allyytj'));
          // 绘制图表
          allyytj.setOption({
            tooltip : {
              trigger: 'item',
              formatter: "{b} : {c} ({d}%)"
            },
            series : [
              {
                type: 'pie',
                radius : '50%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                  {value:res.nowPatient,name: '在院患者'+res.nowpercent},
                  {value:res.riskPeople, name: '营养不良人数'+res.riskpercent}
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ],
            color: ['#006A39','#EA0101']
          });
        }
        getNowrisk()

        $("#zraxis-btn").on("click",function () {
          getYesriskpatient();
        });
        function getYesriskpatient() {
          var startdate = $("#zraxis-start").val();
          var findate = $("#zraxis-end").val();
          var param = "startdate="+startdate+"&findate="+findate;
          http.post(httpRouter.yesriskpatient,param,function (res) {
            yesriskpatient(res);
          });
        }
        function yesriskpatient(res) {

          var xAxisData = [];
          var zyhzlist = [];
          var yybllist = [];
          $.each(res.records,function (key,item) {
            console.log(item);
            $("#zrtable tbody").find("tr").remove();
            $("#zrtable tbody").append('<tr>' +
              '  <td>'+item.DepartmentName+'</td>' +
              '  <td>'+(item.patient || 0)+'</td>' +
              '  <td>'+(item.risk || 0)+'</td>' +
              '</tr>');
            xAxisData.push(item.DepartmentName);
            zyhzlist.push(parseInt(item.patient || 0));
            yybllist.push(parseInt(item.risk || 0));
          })


          var zraxis = echarts.init(document.getElementById('zraxis'));
          zraxis.setOption({
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              data: ['入院患者', '营养不良']
            },
            grid: {
              left: '5%',
              right: '5%',
              bottom: '0%',
              containLabel: true
            },
            xAxis:  {
              type: 'category',
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '入院患者',
                type: 'bar',
                stack: '总量',
                barWidth:15,
                data: zyhzlist
              },
              {
                name: '营养不良',
                type: 'bar',
                stack: '总量',
                barWidth:15,
                data: yybllist
              }
            ],
            color: ['#006A39','#EA0101']
          });
        }
        getYesriskpatient()

        $("#yygyaxis-btn").on("click",function () {
          getIntervenechange();
        });
        function getIntervenechange() {
          var startdate = $("#yygyaxis-start").val();
          var findate = $("#yygyaxis-end").val();
          var param = "startdate="+startdate+"&findate="+findate;
          http.post(httpRouter.intervenechange,param,function (res) {
            intervenechange(res);
          });
        }
        function intervenechange(res) {

          var xAxisData = [];
          var yygylist = [];
          var yybllist = [];
          $.each(res.records,function (key,item) {
            $("#yygytable tbody").find("tr").remove();
            if(item){

              $("#yygytable tbody").append('<tr>' +
                '  <td>'+item.month+'</td>' +
                '  <td>'+(item.patent || 0)+'</td>' +
                '  <td>'+(item.risk || 0)+'</td>' +
                '</tr>');
              xAxisData.push(item.month);
              yygylist.push(parseInt(item.patent || 0));
              yybllist.push(parseInt(item.risk || 0));
            }

          })


          var yygyaxis = echarts.init(document.getElementById('yygyaxis'));
          yygyaxis.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['营养干预', '营养不良']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            series: [
              {
                name: '营养干预',
                type: 'bar',
                barWidth:15,
                data: yygylist
              },
              {
                name: '营养不良',
                type: 'bar',
                barWidth:15,
                data: yybllist
              }
            ],
            color: ['#006A39','#EA0101']
          });
        }
        getIntervenechange()

      });
    </script>
  </body>
</html>



